import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet } from 'react-native';
import { Sudoku, Label } from 'iftide';

export default class User3 extends Component{
    constructor(props) {
        super(props);
    }

    render() {
        const dataList_5 = [
            {
                'icon': require('./Icon.png'),
                'title': '投资理财',
                'showBadge': true,
                'badge': '万2.6',
                'description1': '说明说明说明说',
            },
            {
                'icon': require('./Icon.png'),
                'title': '注册账户转账',
            },
            {
                'icon': require('./Icon.png'),
                'title': 'AI投',
            },
            {
                'icon': require('./Icon.png'),
                'title': '融e购',
            },
            {
                'icon': require('./Icon.png'),
                'title': '投资理财',
            },
            {
                'icon': require('./Icon.png'),
                'title': '注册账户转账',
            },
            {
                'icon': require('./Icon.png'),
                'title': 'AI投', 
            },
            {
                'icon': require('./Icon.png'),
                'title': '融e购',
            },
            {
                'icon': require('./Icon.png'),
                'title': '投资理财',
            },
        ];

        return (
            <View>   
                <View style={[styles.container, {backgroundColor: '#F5F7F9'}]}>
                    <Label text = '宫格样式 - 滑动' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <Sudoku 
                    columnCount={4}
                    rowCount={2}
                    dataSource={dataList_5} 
                    hasTitle={true}
                    hasInnerBorder={true} 
                    slider={true}
                    dotActiveColor={'blue'}
                    //dotStyle={{width:10,height:2,borderRadius:1,marginHorizontal:2}}
                    onClick={(data) => alert('clicked ' + data.title)}
                /> 
             </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 13,
        paddingVertical: 8,
        backgroundColor: '#F5F7F9'
    },
    divider: {
        height: 10,
        backgroundColor: '#F5F7F9'
    }
});